var self = this;
//定义表格使用的数据 添加监听
var tableObj = {
    str: "",
    list: ''
};
// var tableList;
Object.defineProperty(tableObj, 'str', {
    get: function () {
        return tableObj.list
    },
    set: function (val) {
        tableObj.list = val
        $('#tableBody').empty();
        let parseData = JSON.parse(val)
        for (let i = 0; i < parseData.length; i++) {
            $('#tableBody').append(
                `
                                    <tr class="tab-row">
                                    <td>${parseData[i].name}</td>
                                    <td>${parseData[i].row}*${parseData[i].column}</td>
                                    <td>${parseData[i].top}&${parseData[i].left}</td>

                                    <td style="display: flex;align-items: center;justify-content: space-around;">
                                        <button class="tableBtn tableEdit" style="display: none">编辑</button>
                                        <button class="tableBtn " style="display: ${!parseData[i].isShow ? 'block' : 'none'}" onclick="tableDel('${parseData[i].name}')" title="删除">×</button>
                                        <button class="tableBtn " style="display: ${!parseData[i].isShow ? 'block' : 'none'}" onclick="tableUp('${parseData[i].name}')" title="置入">↑</button>
                                        <button class="tableBtn " style="display: ${parseData[i].isShow ? 'block' : 'none'}" onclick="tableDown('${parseData[i].name}')" title="移除">↓</button>
                                    </td>
                                </tr>
                `
            )
        }

    },
})

//侧面抽屉分栏
$(".content2 .tab-item").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
    $(".products .m_content").eq($(this).index()).show().siblings().hide();
})
var isOpenRightBox = false
var isClickClose = false
// $(".content").hover(function () {
//   setTimeout(() => {
//     if (!isOpenRightBox) {
//       isOpenRightBox = true
//       isClickClose = false
//       $(".slider").toggleClass("open");
//       $(".icon").attr("src", "img/right.png");
//       $(".text").html("关闭弹窗");
//     }
//   }, 300)
//
// })

$(".tag").click(function () {
    if (!isOpenRightBox) {
        isOpenRightBox = true
        $(".slider").toggleClass("open");
        $(".icon").attr("src", "img/right.png");
        $(".text").html("关闭弹窗");
    } else {
        isOpenRightBox = false
        isClickClose = true
        $(".slider").removeClass("open");
        $(".icon").attr("src", "img/left.png");
        $(".text").html("打开弹窗");
        //440 - 100 - 100 - 30 - 120 - 35 = 55
        setTimeout(() => {
            isClickClose = false
        }, 600)
    }

});
$(".tag").trigger('click');//模拟点击方便 调试
//分组栏目功能
//创建 桌子
createBtn = function (){
    console.log('点击创建按钮')
    let row = Number($('#row').val())
    let column = Number($('#column').val())
    let top = Number($('#top').val())
    let left = Number($('#left').val())
    if (row > 30 || column > 30) {
        alert('行列不可超过30')
        return false
    }
    if (top < 0 || left < 0) {
        alert('定位不可低于 0，0')
        return false
    }
    let childList = []
    let obj = {
        name: 'parent' + new Date().getTime(),
        row: row,
        column: column,
        left: top,
        top: left,
        zIndex: 1,
        isShow: false,
        childList: []
    }
    let A_Z = 'ABCDEFGHIJKLMNOPKRSTUVWXYZ0123456789'
    let a_z = 'abcdefghijklmnopkrstuvwxyz0123456789'
    for (let i = 0; i < row; i++) {
        for (let j = 0; j < column; j++) {
            obj.childList.push({
                position: A_Z[i] + '-' + a_z[j],
                objData: {
                    id: '',
                }
            })
        }

    }
    //赋值给监听的数据
    console.log('创建桌子的配置参数=', obj)
    tableObj.str = tableObj.str ? JSON.stringify(JSON.parse(tableObj.str).concat([obj])) : JSON.stringify([obj])
    addBox(obj)

}
//重置form
$('.resetBtn').click(() => {
    console.log('点击重置')
    $('#row').val("")
    $('#column').val("")
    $('#top').val("")
    $('#left').val("")
})
//列表点击编辑
$(document).on("click", '.tableEdit', function () {
    console.log('列表点击编辑', this)
    console.log('当前条目', $(this.parentElement).prevAll().length
    )
    let brotherNode = $(this.parentElement).prevAll();

    for (let i = 0; i < brotherNode.length; i++) {
        console.log($(brotherNode[i]).text())
    }
    $('#row').val($(brotherNode[1]).text().split('*')[0])
    $('#column').val($(brotherNode[1]).text().split('*')[1])
    $('#top').val($(brotherNode[0]).text().split('&')[0])
    $('#left').val($(brotherNode[0]).text().split('&')[1])
})

